import { useCallback, useState } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, Button } from 'react-native';
import useTopics from '../hooks/use-topics';
import { useFocusEffect } from '@react-navigation/native';

const Home = ({navigation}) => {
    const [value, setValue] = useState('');
    const { loading, list, onRefresh, onEndReached } = useTopics();
    const [num ,setNum] = useState(0);

    useFocusEffect(
        // useCallBack可与用于在某个变量改变时重新渲染界面
        useCallback(()=>{
            console.log(88)
        },[])
    )
    const goDetail = () => {
        navigation.navigate('detail',{data:'pass data'})
    }
    return (
        <View style={{flex: 1}}>
            <Text style={{fontSize:30}}>
                {num}
            </Text>
            <Button 
                title='点击+1'
                onPress={()=>setNum(num+1)}
            />
            <Button 
                title='to detail'
                onPress={goDetail}
            />
            <TextInput
                value={value}
                onChangeText={text => setValue(text)}
                style={{
                    borderWidth: 2,
                    borderColor: '#f00',
                    width: '50%',
                    height: 50,
                    borderRadius: 25,
                    alignSelf: 'center',
                    margin: 20,
                    paddingHorizontal: 20
                }}
            />
            {/* <FlatList 
                refreshing={loading}
                onRefresh={onRefresh}
                onEndReached={onEndReached}
                style={{flex: 1}}
                data={list}
                renderItem={({item})=><Text>{item.title}</Text>}
                keyExtractor={(item)=>item.id}
            /> */}
        </View>
    )
}
const styles = StyleSheet.create({

});
export default Home